"use client";
import { useWalletStore } from "@/stores/useWalletStore";
import { Mask } from "antd-mobile";
import { useEffect, useState } from "react";

const ActivityMask = () => {
    const [visible, setVisible] = useState<boolean>(false);

    const wallet = useWalletStore((state) => state.wallet);
    console.log(`🚀🚀🚀🚀🚀-> in ActivityMask.tsx on 10`, wallet);
    useEffect(() => {
        if (wallet?.notice?.lose_score > 0) {
            setVisible(true);
        }
    }, [wallet?.notice?.lose_score]);

    return (
        <Mask visible={visible} destroyOnClose={true} getContainer={null}>
            {/*<div*/}
            {/*    className={"absolute right-[0.2083rem] top-[20%] z-50"}*/}
            {/*    onClick={() => setVisible(false)}*/}
            {/*>*/}
            {/*    <span className={"iconfont icon-guanbi"}></span>*/}
            {/*</div>*/}
            <div className={"absolute top-[20%] z-50"}>
                <div className={"h-[4.2rem] w-[100%]"}>
                    <div
                        className={"iconfont icon-guanbi absolute right-[30px]"}
                        onClick={() => setVisible(false)}
                    ></div>
                    <img src={"/doings/activity.png"} className={"h-[4.1667rem] object-contain"} />

                    <div
                        className={
                            "absolute -left-[8%] top-[28%] h-[2.0833rem] w-[56%]" +
                            " translate-x-1/2" +
                            " p-[0.0694rem] text-[#000]"
                        }
                    >
                        <div className={"text-center font-bold"}>Um presente</div>
                        <div className={"mt-[0.0294rem] text-center"}>
                            <span>Não tive sorte hoje,</span>
                            <span>Continue com o bom trabalho</span>
                        </div>
                        <div className={"mt-[0.4167rem] flex items-center justify-center"}>
                            <span className={"mr-[0.0694rem]"}>presente: </span>
                            <span className={"text-[0.2083rem] font-bold"}>
                                {wallet.gift_packet.amount}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </Mask>
    );
};

export default ActivityMask;